<template>
      <v-chart class="h-80 w-full" :option="option" style="height: 100%;"/>
</template>

<script setup lang="ts">
import VChart from "vue-echarts";
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import type { ComposeOption } from 'echarts/core'
import type { BarSeriesOption } from 'echarts/charts'
import type { GridComponentOption } from 'echarts/components'
import { getShippedTodaySum } from "/@/api/platform/report/dailyDeliveryData"
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
use([GridComponent, BarChart, CanvasRenderer])

type EChartsOption = ComposeOption<GridComponentOption | BarSeriesOption>

// 提交表单数据
const data = reactive({
    namedata: [],
    valuedata: [],
});

onMounted(() => {
    getShippedTodaySum().then(res => {
        res.data.forEach(f => {
            data.namedata.push(f.name + '(柜)')
            data.valuedata.push(f.value)
        });
    })
})

// 图表数据
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: data.namedata,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: t('dailyDeliveryData.deliverQty'),
      type: 'bar',
      barWidth: '60%',
      data: data.valuedata
    }
  ]
});
</script>